// 注册交互

// 基础地址
const BASE_URL = 'http://110.41.43.118:3008';

let oPhonetd = document.querySelector('.phone-td');
let oUsernameMsg = document.querySelector('.username-msg');
let oCodeBtn = document.querySelector('.code-btn');
let oCaptchatd = document.querySelector('.captcha-td');
let oCodeMsg = document.querySelector('.code-msg');
let oCodeTxt = document.querySelector('.code-txt');
let oCreatePasswordtd = document.querySelector('.create_password-td');
let oPasswordMsg = document.querySelector('.password-msg');
let aPwdStrengthSpan = document.querySelectorAll('.pwd-strength span');
let oConfirmtd = document.querySelector('.confirm-td');
let oConfirmMsg = document.querySelector('.confirm-msg');
let oPacttd = document.querySelector('.pact-td');
let oRegisterBtn = document.querySelector('.register_btn');

// 当前元素的状态
let usernameStatus = false;
let codeStatus = false;
let pwdStatus = false;
let confirmStatus = false;
let pactStatus = false;

// 验证交互效果方法
function msgRender(obj = null, objMsg = null, isShow = 'block', color = 'red', txt = '', borderColor = 'transparent') {
	objMsg.style.display = isShow;
	objMsg.style.color = color; 
	objMsg.innerHTML = txt;
	obj.style.borderColor = borderColor;
}

// 验证用户名
oPhonetd.onblur = function() {
	// 前端校验
	let re = /^[0-9a-zA-Z_]{3,12}$/g;
	if (!re.test(oPhonetd.value)) {
		msgRender(oPhonetd, oUsernameMsg, 'block', 'red', '用户名必须为3-12位字母下划线组成', 'red');
		usernameStatus = false;
		return;
	};

	// 后端校正
	yzb.ajax({
		method: 'post',
		url: BASE_URL + '/api_user',
		data: {
			username: oPhonetd.value,
			status: 'check'
		},
		success(res) {
			if (res.code != 0) {
				msgRender(oPhonetd, oUsernameMsg, 'block', 'red', '用户名已存在', 'red');
				usernameStatus = false;
				return;
			}

			// 成功之后去掉红框
			msgRender(oPhonetd, oUsernameMsg, 'block', 'green', '用户名可用', 'transparent');
			usernameStatus = true;
		}
	});
};

// 累加验证码结果
let codeStr = '';
// 验证验证码
oCaptchatd.onkeyup = function() {
	if (codeStr.toLowerCase() != this.value.toLowerCase()) {
		msgRender(oCaptchatd, oCodeMsg, 'block', 'red', '验证码错误', 'red');
		codeStatus = false;
		return;
	};
	msgRender(oCaptchatd, oCodeMsg, 'block', 'green', '验证码正确', 'transparent');
	codeStatus = true;
};

// 创建密码
oCreatePasswordtd.onkeyup = function() {
	// 验证非数字
	let re = /^\d{6,12}$/g;
	if (!re.test(this.value)) {
		msgRender(oCreatePasswordtd, oPasswordMsg, 'block', 'red', '密码必须为6-12位数字', 'red');
		// 验证强中弱
		strengthColor();
		pwdStatus = false;
		return;
	};
	// 通过正则使用 强中弱
	msgRender(oCreatePasswordtd, oPasswordMsg, 'none', 'red', '密码必须为6-12位数字', 'transparent');
	// 验证强中弱
	strengthColor();

	// 弱中强颜色方法
	function strengthColor(color1 = "#fff", color2 = "#fff", color3 = "#fff") {
		aPwdStrengthSpan[0].style.background = color1;
		aPwdStrengthSpan[1].style.background = color2;
		aPwdStrengthSpan[2].style.background = color3;
	};

	switch (this.value.length) {
		case 6:
		case 7:
			strengthColor('#e93c3c', '#fff', '#fff');
			break;
		case 8:
		case 9:
		case 10:
			strengthColor('#e93c3c', '#e5c200', '#fff');
			break;
		case 11:
		case 12:
			strengthColor('#e93c3c', '#e5c200', '#00d2e5');
			break;
	}
	pwdStatus = true;
};

// 确认密码
oConfirmtd.onblur = function() {
	// 验证
	if(this.value != oCreatePasswordtd.value){
		msgRender(oConfirmtd, oConfirmMsg, 'block', 'red', '两次密码不一致', 'red');
		confirmStatus = false;
		return;
	};
	msgRender(oConfirmtd, oConfirmMsg, 'block', 'green', '', 'transparent');
	confirmStatus = true;
};

// 条款协议
oPacttd.onchange = function() {
	pactStatus = this.checked;
};

// 点击注册事件
oRegisterBtn.onclick = function() {
	// 验证是否所有通过
	if(!usernameStatus){
		oPhonetd.focus();
		msgRender(oPhonetd, oUsernameMsg, 'block', 'red', '用户名不可用', 'red');
		return;
	};
	if(!codeStatus){
		oCaptchatd.focus();
		msgRender(oCaptchatd, oCodeMsg, 'block', 'red', '请输入正确的验证码', 'red');
		return;
	};
	if(!pwdStatus){
		oCreatePasswordtd.focus();
		msgRender(oCreatePasswordtd, oPasswordMsg, 'block', 'red', '请输入正确的密码', 'red');
		return;
	};
	if(!confirmStatus){
		oConfirmtd.focus();
		msgRender(oConfirmtd, oConfirmMsg, 'block', 'red', '密码不一致', 'red');
		return;
	};
	if(!pactStatus){
		alert('请勾选协议');
		return;
	};
	
	// 注册
	yzb.ajax({
		method:'post',
		url:BASE_URL + '/api_user',
		data:{username:oPhonetd.value,password:oCreatePasswordtd.value,status:'register'},
		success(res){
			if(res.code != 0){
				console.log(res);
				return;
			};
			
			// 跳转到登录页面
			window.location.href = 'login.html';
		}
	});
	
};

// 验证码效果
(function() {

	// 解构
	let {
		random
	} = Math;

	// 默认显示验证码
	let codeArr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f", "g", "h",
		"i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z",
		"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V",
		"W", "X", "Y", "Z"
	];

	// 默认调用一次验证码
	getCode();

	// 点击换一张
	oCodeBtn.onclick = getCode;

	// 生成验证码方法
	function getCode() {
		// 先清除验证码
		codeStr = '';
		// 清除验证码文本内容
		oCaptchatd.value = '';
		// 换容器背景图
		oCodeTxt.style.backgroundPosition = `${random() * 700}px ${random() * 400}px`;

		// 先清空验证码
		oCodeTxt.innerHTML = '';
		// 随机四位
		for (let i = 0; i < 4; i++) {
			// 创建dom
			let span = document.createElement('span');
			// 随机 0-61
			span.innerHTML = codeArr[parseInt(random() * 62)];
			codeStr += span.innerHTML;
			// 随机颜色
			span.style.color = `rgb(${random() * 256},${random() * 256},${random() * 256})`;
			// 随机字体大小
			span.style.fontSize = parseInt(random() * 13 + 10) + 'px';
			// 随机斜体
			span.style.fontStyle = random() < 0.5 ? 'italic' : 'none';
			// 随机加粗
			span.style.fontWeight = random() < 0.5 ? 'bold' : 'normal';
			// 添加到容器
			oCodeTxt.appendChild(span)
		};
	};

})();